<template>

	<view class="container">
		

			<view class="header">
				<image class="logo" src="/static/logo.png" mode="aspectFit" />
				<text class="title">智能物料柜客户端</text>
			</view>
			<view class="login-form">
				<view class="input-group">
					<label class="input-label">用户名</label>
					<input class="input-field" type="text" v-model="name" />
				</view>
				<view class="input-group">
					<label class="input-label">密码</label>
					<input class="input-field" type="password" v-model="password" />
				</view>
				<view class="options">
					<checkbox class="remember-me" checked="false">记住我</checkbox>
					<text class="forgot-password" @click="handleForgotPassword" v-if="false">忘记密码?</text>
				</view>
				<button class="login-button" @click="handleLogin()">登 录</button>
				<!-- 其他登录方式图标或链接 -->
				<text v-if="false" class="register">还没有账号？<text class="register-link"
						@click="handleRegister">立即注册</text></text>
				<auth-modal :show="showAuthModal" @cancel="handleAuthCancel" @confirm="handleAuthConfirm" />
			</view>
		
	</view>
</template>

<script>
	const API = require("../../utils/apiConfig.js");
	import AuthModal from './components/auth-modal.vue'
	export default {
		components: {
			AuthModal
		},
		data() {
			return {
				name: 'zs',
				password: '123456',
				rememberLoginUser: false,
				showAuthModal: false,
				

			}
		},
		onShow() {
			let deviceIdStorage = uni.getStorageSync('deviceIdStorage');
			if (deviceIdStorage) {
				getApp().globalData.deviceId = deviceIdStorage;
				this.relationDevice();

			} else {
				this.goSetting();
			}


		},
		methods: {
			goSetting() {
				uni.navigateTo({
					url: '/pages/setting/setting'
				});
			},
			relationDevice() {
				API.relationcabinet({
					type: 0,
					serial_number: getApp().globalData.deviceId
				}).then((res) => {
					console.log("res   " + res);
					if (res.code == 0) {
						getApp().globalData.marshalling_id = res.data.marshalling_id;
						getApp().globalData.company_id = res.data.company_id;
						getApp().globalData.version = res.data.version;
						getApp().globalData.cabinet_id = getApp().globalData.deviceId;
						getApp().globalData.useOldReplaceNew = res.data.is_trade_in == 1 ? true : false;
					} else {
						if (res.msg) {
							uni.showToast({
								icon: 'error',
								title: res.msg,
								duration: 2000
							})
						}
					}
				})
			},
			handleLogin() {
				// 处理登录逻辑
				// uni.switchTab({
				// 	url: '/pages/index/index'
				// })
				this.getUserInfo();
				if (!this.showAuthModal) {
					API.login({
						username: this.name,
						password: this.password
					}).then((res) => {
						console.log("name " + res);
						if (res.code == 0) {
							getApp().globalData.loginTempToken = res.data.token;
							getApp().globalData.is_admin = res.data.is_admin == 1 ? true : false;

							getApp().connect();
							uni.switchTab({
								url: '/pages/index/index'
							})
						} else {
							if (res.msg) {
								uni.showToast({
									icon: 'error',
									title: res.msg,
									duration: 2000
								})
							}
						}
					});
				}

			},
			handleForgotPassword() {
				// 处理忘记密码逻辑
			},
			handleRegister() {
				// 处理注册逻辑
			},
			// 获取用户信息的方法
			async getUserInfo() {
				// 再次检查是否同意协议
				const agreed = uni.getStorageSync('hasAgreedToAgreement')
				if (!agreed) {
					this.showAuthModal = true
					return
				}

				try {
					// 调用uni-app获取用户信息的API
					const res = await uni.getUserProfile({
						desc: '用于完善会员信息'
					})
					console.log('用户信息:', res.userInfo)
					// 处理用户信息...
				} catch (err) {
					console.error('获取用户信息失败:', err)
				}
			},
			handleAuthCancel() {
				this.showAuthModal = false
				uni.showToast({
					title: '需要同意协议才能使用完整功能',
					icon: 'none'
				})
			},

			handleAuthConfirm() {
				this.showAuthModal = false
				uni.setStorageSync('hasAgreedToAgreement', true)
				uni.showToast({
					title: '授权成功',
					icon: 'success'
				})
				// 可以在这里继续获取用户信息
				this.getUserInfo()
			}
		}
	};
</script>

<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100vh;
		background-image: linear-gradient(135deg, #667eea 0%, #994df2 50%);
		background: -webkit-linear-gradient(135deg, #667cca 0%, #994df2 50%);
		overflow: hidden;
	}

	.logo {
		width: 80px;
		height: 80px;
		border-radius: 50%;
		box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
	}

	.header {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 30px;
	}

	.title {
		font-size: 24px;
		font-weight: bold;
	}

	.login-form {
		width: 300px;
		background: #f8f9fa;
		padding: 20px;
		border-radius: 8px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	}

	.input-group {
		display: flex;
		align-items: center;
		/* 强制标签和输入框垂直居中 */
		margin-bottom: 15px;
	}

	/* 标签样式优化 */
	.input-label {
		font-size: 16px;
		width: 20%;
		/* 固定标签宽度 */
		text-align: right;
		/* 文字右对齐 */
		padding-right: 10px;
		/* 标签与输入框间距 */
		height: 40px;
		/* 与输入框高度一致 */
		line-height: 40px;
		/* 行高=高度，确保文字垂直居中 */
	}

	/* 输入框样式优化 */
	.input-field {
		flex: 1;
		/* 自动填充剩余宽度 */
		height: 40px;
		padding: 0 10px;
		border: 1px solid #ccc;
		border-radius: 4px;
		box-sizing: border-box;
		line-height: normal;
		/* 清除默认行高 */
		display: flex;
		align-items: center;
		/* 输入文字垂直居中 */
	}

	.options {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15px;
	}

	.remember-me {
		margin-right: 10px;
		margin-left: 5px;
	}

	.forgot-password {
		color: #007aff;
		text-decoration: underline;
		cursor: pointer;
	}

	.login-button {
		width: 100%;
		padding: 5px;
		background-color: #007aff;
		color: #fff;
		border: none;
		border-radius: 4px;
		font-size: 16px;
		cursor: pointer;
		margin-bottom: 5px;
	}

	.register {
		font-size: 14px;
		padding-left: 5px;
		color: #888;
		text-align: center;
	}

	.register-link {
		color: #007aff;
		text-decoration: underline;
		cursor: pointer;
	}

	
</style>